<template>
	<view class="container">
		<view class="goods_img">
			<image :src="image" mode="widthFix" class="img"></image>
		</view>
		
		<view class="goods_info">
			<view class="center">
				<view class="price">
					￥{{price}}
				</view>
				<view class="name">
					{{name}}
				</view>
				<view class="desc">
					{{desc}}
				</view>
				<view class="labels">
					<view class="label" v-for="(label,i) in label" :key="label">
						{{label}}
					</view>
				</view>
			</view>
			
			<view class="detail_img">
				<image :src="item" mode="widthFix" class="img" v-for="(item,index) in images" :key="item" style="display: block;"></image>
			</view>
		</view>
		
		
		<view class="goods_info_v2" v-show="false">
			<view class="center">
				<view class="name">
					{{name}}
				</view>
				<view class="price">
					￥{{price}}
					<view class="sale_num">
						消费9916
					</view>
				</view>
				
				<!-- <view class="desc">
					{{desc}}
				</view>
				<view class="labels">
					<view class="label" v-for="(label,i) in label" :key="label">
						{{label}}
					</view>
				</view> -->
				
				<view class="tabs">
					<uni-segmented-control :current="activeCateIndex" :values="items" style-type="text" active-color="#FA2C1E" @clickItem="chageActiveCateIndex"  style="background-color: #fff;"/>
				</view>
				<view class="tab_item" v-if="activeCateIndex == '0'">
					<view class="cell">
						<view class="label"> 使用次数</view>
						<view class="value">20次 </view>
					</view>
					<view class="cell">
						<view class="label"> 单次使用时长</view>
						<view class="value"> 30分钟</view>
					</view>
					<view class="cell">
						<view class="label"> 适用门店</view>
						<view class="value"> 永清店、清宁店</view>
					</view>
				</view>
				<view class="tab_item" v-if="activeCateIndex == '1'">
					<view class="cell">
						<view class="label"> 验证方式</view>
						<view class="value">进仓验券 </view>
					</view>
					<view class="cell">
						<view class="label"> 预约信息</view>
						<view class="value"> 无需预约，如遇高峰时段排队</view>
					</view>
					<view class="cell">
						<view class="label"> 使用时间</view>
						<view class="value"> 周一至周日24小时可用</view>
					</view>
					<view class="cell">
						<view class="label"> 适用人数</view>
						<view class="value"> 1人</view>
					</view>
				</view>
			</view>
			<view class="equip_service">
				<view class="title">
					适用设备
					<image src="/static/right.png" mode="widthFix" style="width: 20rpx;height: 20rpx;margin-left: 14rpx;"></image>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in deviceServiceList" :key="item.id">
						<image :src="item.image" mode="widthFix"></image>
						<view class="name">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="detail_img">
			<view class="title">
				设备环境
				<image src="/static/right.png" mode="widthFix" style="width: 20rpx;height: 20rpx;margin-left: 14rpx;"></image>
			</view>
			<image :src="item" mode="widthFix" class="img" v-for="(item,index) in images" :key="item" style="display: block;"></image>
		</view>
		</view>
		<view class="buy_btn">
			<view class="price">
				￥{{price}}
			</view>
			<button type="default" class="btn" @click="payment">立即购买</button>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="popup_goods">
				<view class="popup_goods_info">
					<view class="popup_goods_info_img">
						<image :src="image" mode="widthFix" class="img" style="width: 200rpx;"></image>
					</view>
					<view class="popup_goods_info_right">
						<view class="price">
							￥{{skuSelected.price}}
						</view>
						<view class="stock">
							库存：{{skuSelected.stock}} 件
						</view>
						<view class="spu_text">
							<text v-if="skuSelected.difference.length > 0">
								已选中：<text v-for="item in skuSelected.difference" :key="item">{{item}}</text>
							</text>
							<text v-else>请选择规格</text>
						</view>
					</view>
				</view>
				<view class="spus">
					<view class="spu" v-for="(item,index) in spu" :key="item.id">
						<view class="name">
							{{item.name}}
						</view>
						<view class="spu_item">
							<view class="item" 
							:class="{'active':spuSelected[index] && spuSelected[index] == spuItem.name}" 
							v-for="(spuItem,i) in item.item" 
							:key="spuItem.name"
							@click="toSelectSpu(spuItem.name,index)"
							>
								{{spuItem.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="popup_goods_number">
					<view class="title">
						购买数量
					</view>
					<view class="number">
						<uni-number-box :min="1" :max="skuSelected.stock" :value="number" @change="change" />
					</view>
				</view>
				<button type="default" class="btn" @click="toPayment">完成</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {goodsDetail,getDeviceServiceInfo} from '../../api/api.js'
	export default {
		data() {
			return {
				shopname:'',
				shop_id:'',
				goods_id:'',
				image:'',
				price:'',
				name:'',
				desc:'',
				label:[],
				activeCateIndex:0,
				items:['套餐详情','购买须知'],
				images:[],
				sku:[],
				spu:[],
				spuSelected:[],
				number: 1,
				deviceServiceList:[],
			}
		},
		computed:{
			skuSelected(){
				return this.sku.find(s=> s.difference.join() == this.spuSelected.join() ) || {price:this.price,stock:'999',difference:this.spuSelected}
			}
		},
		onLoad(options) {
			this.goods_id = options.goodsId
			this.shop_id = options.shopId
			this.shopname = options.shopname
			this.getGoodsDetail()
			this.getDeviceServiceInfo()
		},
		methods: {
			chageActiveCateIndex(e){
				if(this.activeCateIndex != e.currentIndex){
					this.activeCateIndex = e.currentIndex
				}
			},
			getDeviceServiceInfo(){
				getDeviceServiceInfo().then(res=>{
					this.deviceServiceList = res.data.data
				})
			},
			payment(){
				console.log('payment')
				this.$refs.popup.open()
			},
			toPayment(){
				this.$refs.popup.close()
				// 传递shop_id,goods_id,sku_id,number
				uni.navigateTo({
					url: '/pages/shop/confirmOrder/confirmOrder?shopId=' + this.shop_id + '&goodsId=' 
					+ this.goods_id + '&skuId='+this.skuSelected.id  + '&number='+this.number + '&shopname=' +this.shopname 
				})
			},
			toSelectSpu(name,index){
				console.log(name,index)
				if(this.spuSelected[index] != name){
					this.spuSelected[index] = name
					this.spuSelected = JSON.parse(JSON.stringify(this.spuSelected))
				}
			},
			change(value) {
				this.number = value
			},
			getGoodsDetail(){
				goodsDetail({goods_id:this.goods_id,shop_id:this.shop_id}).then(res=>{
					console.log(res)
					let {description,title,label_ids,price,image,images,sku,spu} = res.data.data
					this.desc = description
					this.name = title
					this.label = label_ids
					this.price = price
					this.image = image
					this.images = images
					this.sku = sku
					this.spu = spu
					this.spuSelected = spu.map(s=>s.item[0].name)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		// padding-bottom: 154rpx;
		padding-bottom: calc( 154rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
		padding-bottom: calc( 154rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
		min-height: calc(100vh - env(safe-area-inset-top));
		// background-color: #f8f8f8;
	}
	.goods_img {
		width: 100%;
		background-color: #fff;
		.img {
			width: 100%;
			height: 100%;
		}
	}
	
	.goods_info {
		.center {
			padding: 24rpx 30rpx ;
			.price {
				height: 72rpx;
				font-size: 50rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FA2C1E;
				line-height: 72rpx;
				
			}
			.name {
				margin-top: 20rpx;
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 48rpx;
			}
			.desc {
				margin-top: 16rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
			.labels {
				width: 100%;
				margin-top: 24rpx;
				display: flex;
				margin-bottom: 10rpx;
				.label {
					font-size: 18rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FA2C1E;
					line-height: 30rpx;
					background: #FFFFFF;
					box-shadow: 0px 4rpx 30rpx rgba(0,0,0,0.05);
					border-radius: 6rpx;
					border: 2rpx solid #FA2C1E;
					margin-right: 12rpx;
					padding: 4rpx 12rpx;
				}
			}
		}
		.detail_img {
			width: 100%;
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.goods_info_v2 {
		.center {
			padding: 24rpx 30rpx ;
			background-color: #fff;
			.price {
				height: 72rpx;
				font-size: 50rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FA2C1E;
				line-height: 72rpx;
				margin-top: 18rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #E7E7E7;
				.sale_num {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
			}
			.name {
				margin-top: 6rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
			}
			.desc {
				margin-top: 16rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
			.labels {
				width: 100%;
				margin-top: 24rpx;
				display: flex;
				margin-bottom: 10rpx;
				.label {
					font-size: 18rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FA2C1E;
					line-height: 30rpx;
					background: #FFFFFF;
					box-shadow: 0px 4rpx 30rpx rgba(0,0,0,0.05);
					border-radius: 6rpx;
					border: 2rpx solid #FA2C1E;
					margin-right: 12rpx;
					padding: 4rpx 12rpx;
				}
			}
			.tabs {
				margin-top: 32rpx;
				/deep/ .segmented-control__item {
					flex: none;
					margin-right: 18rpx;
				}
			}
			.tab_item {
				width: 100%;
				background-color: #F8F8F8;
				padding: 14rpx 24rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #47474C;
				line-height: 36rpx;
				margin-top: 20rpx;
				.cell {
					width: 100%;
					padding: 10rpx 0;
					display: flex;
					justify-content: space-between;
				}
			}
		}
		.equip_service {
			background-color: #fff;
			padding: 24rpx 30rpx;
			margin-top: 20rpx;
			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				margin-top: 10rpx;
				margin-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.list {
				display: flex;
				padding-bottom: 26rpx;
				height: 100%;
				.item {
					// flex: 1;
					width: 30%;
					// height: 100%;
					
					margin-right: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					image {
						height: calc(30vw - 36rpx);
						width: 100%;
					}
					.name {
						margin-top: 26rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						line-height: 40rpx;
					}
				}
				.item:last-child {
					margin: 0;
				}
			}
		}
		.detail_img {
			width: 100%;
			background-color: #fff;
			padding: 24rpx 30rpx;
			margin-top: 20rpx;
			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				margin-top: 10rpx;
				margin-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.img {
				width: 100%;
				height: 100%;
			}
		}
		
	}
	
	.buy_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		// height: 134rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 23rpx 30rpx;
		padding-bottom: calc( 23rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
		padding-bottom: calc( 23rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
		.price {
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FA2C1E;
			line-height: 56rpx;
		}
		.btn {
			width: 320rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 0;
		}
	}

	.popup_goods {
		padding: 40rpx;
		width: 100%;
		background-color: #fff;
		.popup_goods_info {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
			.popup_goods_info_img {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ddd;
				border-radius: 16rpx;
				margin-right: 20rpx;
				overflow: hidden;
			}
			.popup_goods_info_right {
				display: flex;
				height: 200rpx;
				flex-direction: column;
				justify-content: space-around;
				padding: 20rpx 0;
				.price {
					color: #FA2C1E;
					font-size: 34rpx;
					font-weight: 600;
				}
				.stock {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
		.spus {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
			.spu {
				margin-top: 20rpx;
				.name {
					
				}
				.spu_item {
					margin-top: 20rpx;
					.item {
						float: left;
						margin-right: 16rpx;
						border: 1px solid #888;
						padding: 6rpx 20rpx;
						border-radius: 8rpx;
						color: #888;
					}
					.active {
						border: 1px solid #f08b68;
						color: #f08b68;
					}
				}
				.spu_item::after{clear:both;content:'';display:block;}
			}
		}
		.popup_goods_number {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
		}
		.btn {
			margin-top: 20rpx;
			width: 100%;
			height: 88rpx;
			background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	
</style>
